<template>
	<div id="app" name="main">
		<div class="header">
			<img src="../../static/lfl/head_bg.jpg" />
			<div class="login">
				<router-link to="/percent"><img src="../../static/lfl/icon_user.png" /></router-link>
			</div>
			<div class="text">
				<p>二手房/租房</p>
				<p>
					<h2>海量真房源</h2></p>
				<p>
					<h2>省心来住新房</h2></p>
			</div>
			<div class="search" @click="mysearch">
				<van-search placeholder="请输入小区或商圈" />
			</div>
		</div>
		<div class="banner">
			<div class="item">
				<div class="item-t">
					<router-link to="lideta/twohouse"><img src="../../static/lfl/icon_ershoufang.png" /></router-link>
				</div>
				<div class="item-b">
					二手房
				</div>
			</div>

			<div class="item">
				<div class="item-t">
					<router-link to="/user/local"><img src="../../static/lfl/icon_haiwai.png" /></router-link>
				</div>
				<div class="item-b">
					本地
				</div>
			</div>
			<div class="item">
				<div class="item-t">
					<router-link to="/newhouse"><img src="../../static/lfl/icon_xinfang.png" /></router-link>

				</div>
				<div class="item-b">
					新房
				</div>
			</div>
			<div class="item">
				<div class="item-t">
					<router-link to="/lideta"><img src="../../static/lfl/icon_zufang.png" /></router-link>

				</div>
				<div class="item-b">
					租房
				</div>
			</div>

		</div>
		<h5 style="padding-left: 0.3rem;">为您推荐</h5>
		<div class="">
			<div class="list" v-for="item in data">
				<router-link :to="{path:'/lideta/mydetails',query:{id:item.house_id}}">
					<div class="list-l">
						<img v-bind:src="'http://106.13.72.24:81/house/public/static/uploads/'+item.img1" />
					</div>
					<div class="list-r">
						<!--//简介-->
						<p style="font-size: 14px;">{{item.house_name}}</p>
						<!--//位置及规格-->
						<p style="font-size: 12px;color: #858585;" class="fontsize" >{{item.house_type}}/{{item.house_size}}m²/{{item.house_direction}}/{{item.house_des}}</p>
						<!--//价格-->
						<p>{{item.house_price}}元/月</p>
					</div>
				</router-link>
			</div>
		</div>
       <div class="clik" @click="getData">{{state}}</div>
	</div>

</template>

<script>
	export default {
		name: 'home',
		data() {
			return {
               state:'点击加载更多',
				title: '',
				type: '',
				data: "",
				page:2,
				last_page:0
			}
		},
		mounted: function() {
			//查询数据
			var _this = this;
			this.axios.post(_this.ajaxUrl + '/api/Lideta/userdata', _this.qs.stringify({})).then(function(res) {
				_this.data = res.data.data;
//				console.log(res.data);
			}).catch(function(err) {
				console.log(res.data);
			});
		},
		methods: {
			mysearch() {
				this.$router.push({
					name: 'search'
				});
			},
			getData() {
				var _this = this;
				//分页
				_this.axios.get(_this.ajaxUrl + '/api/mylist/finds?page=' + _this.page).
				then(function(res) {
					for (var i = 0; i < res.data.data.length; i++) {
						_this.data.push(res.data.data[i]);
					}
					if (_this.page % 3 == 0) {
						_this.state = "没有更多了"
					}
					_this.page++;
//					console.log(res)
				}).catch(function(err) {
					console.log(err)
				})
			}
		}
	};
</script>

<style scoped="scoped">
	.header {
		width: 7.5rem;
		height: 5.2rem;
		background-size: cover;
		position: relative;
		left: 0;
		top: 0;
	}
	.header>img{
		width: 100%;
		height: 100%;
	}
	
	a {
		color: black;
	}
	
	.login {
		position: absolute;
		top: 0.6rem;
		left: 6.4rem;
	}
	
	.login img {
		width: 0.7rem;
		height: 0.7rem;
	}
	
	.text {
		position: absolute;
		left: 1rem;
		top: 1.8rem;
		color: white;
	}
	
	.text > p:first-of-type {
		font-size: 12px;
	}
	
	.search {
		position: absolute;
		top: 4.65rem;
		left: 50%;
		transform: translate(-50%);
	}
	
	.van-search {
		border-radius: 0.5rem;
		width: 4.5rem;
		box-shadow: 1px 2px #dcdcdc;
	}
	
	.banner {
		height: 3.4rem;
		width: 7.5rem;
		display: flex;
		justify-content: space-around;
	}
	
	.item {
		margin-top: 1.2rem;
		text-align: center;
		font-size: 14px;
		color: #101d37;
	}
	
	.item-t img {
		width: 1rem;
		height: 1rem;
	}
	
	.list {
		margin: auto;
		width: 6.5rem;
		height: 2.7rem;
		border-bottom: 1px solid gainsboro;
	}
	
	.list-l {
		width: 2.15rem;
		height: 1.65rem;
		margin-top: 0.35rem;
		float: left;
	}
	
	.list-l img {
		width: 2.15rem;
		height: 1.65rem;
		border-radius: 0.1rem;
	}
	
	.list-r {
		float: right;
		width: 3.95rem;
		height: 1.65rem;
		margin-top: 0.35rem;
	}
	
	.list-r p:nth-of-type(3) {
		font-size: 20px;
		color: #fa533b;
		font-weight: 400;
	}
	
	.van-loading {
		width: 60px !important;
		height: 60px !important;
		margin: auto;
	}
	.fontsize{
		width: 4.1rem;
		height: 0.62rem;
		font-size: 0.12rem;
		color: #b8b8b8;
		line-height: 0.35rem;
		margin-top: 0.1rem;
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp:2;
	}
	.clik {
		width:100%;
		height: 0.6rem;
		line-height: 0.6rem;
		margin: auto;
		border-radius: 0.1rem;
		/*background: gainsboro;
		border: 1px dashed darkgray;*/
		color: gray;
		font-size: 0.16rem;
		margin-top: 0.1rem;
		margin-bottom: 0.1rem;
		display: block;
		text-align: center;
	}
</style>